import React from "react";
import { createUseStyles } from "react-jss";

const useStyles = createUseStyles({
  popover: {
    background: "#FFFBE6",
    border: "1px solid #FFE58F",
    width: "294px",
    position: "absolute",
    left: "calc(100% + 10px)",
    top: "50%",
    marginTop: "-45px",
    borderRadius: "4px",
    color: "#333333",
    lineHeight: "22px",
    padding: "5px 5px 5px 10px",
    fontSize: "12px",
    opacity: 0,
  },
  triangle: {
    position: "absolute",
    left: "-7px",
    top: "50%",
    marginTop: "-10px",
    width: 0,
    height: 0,
    borderWidth: "6px 6px 6px 0px",
    borderStyle: "solid",
    borderColor: "transparent #FFE58F transparent transparent",
  },
  triangleSpan: {
    display: "block",
    width: 0,
    height: 0,
    borderWidth: "4px 4px 4px 0",
    borderStyle: "solid",
    borderColor: "transparent #FFFBE6 transparent transparent",
    position: "absolute",
    left: "3px",
    top: "-4px",
  },
});

const Popover = () => {
  const classes = useStyles();
  return (
    <div className={classes.popover} id="test">
      <div className={classes.triangle}>
        <span className={classes.triangleSpan} />
      </div>
      1. 密码长度为8 - 32 范围内的整数 <br />
      2. 不能使用空格、中文
      <br />
      3. 至少含数字 / 小写字母 / 大写字母 / 符号2种组合
      <br />
      4. 不能含有除!@#$%^&*以外的非法字符
    </div>
  );
};

export default Popover;
